import React, { useState } from "react";
import "./App.css";

import Protal from "./components/Protal";
import Button from "./Button";
import Dialog from "./Dialog";
import VisibleProvider from "./VisibleProvider";

function App() {
  const [isButtonVisible, setButtonVisible] = useState(true);
  const [isDialogVisible, setDialogVisible] = useState(false);

  return (
    <VisibleProvider
      value={{
        isButtonVisible,
        toggleButtonVisible: setButtonVisible,
        isDialogVisible,
        toggleDialogVisible: setDialogVisible,
      }}
    >
      <Protal>
        <Button />
      </Protal>
      <Protal>
        <Dialog />
      </Protal>
    </VisibleProvider>
  );
}

export default App;
